<template>
  <el-container>
    <el-aside style="width:200px;">
      <el-row class="user__link">
        <el-avatar :src="avatar" :size="120"></el-avatar>
        <el-row class="user__link">{{ user.name }}</el-row>
      </el-row>
      <el-menu default-active="0" class="el-menu-vertical" @select="jump">
        <el-menu-item index="0">
          <i class="el-icon-user-solid"></i>
          <span slot="title">基本资料</span>
        </el-menu-item>
        <el-menu-item index="1">
          <i class="el-icon-star-on"></i>
          <span slot="title">关注</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-s-custom"></i>
          <span slot="title">粉丝</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-time"></i>
          <span slot="title">浏览历史</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-s-tools"></i>
          <span slot="title">安全</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="user__main">
      <nuxt-child :replace="`/user/${user.id}/info`" keep-alive />
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'User',
  layout: 'full',
  validate({ route }) {
    if (route.path === '/user') {
      return false
    }
    return true
  },
  data() {
    return {
      page: ['info', 'follow', 'fans', 'history', 'safe']
    }
  },
  middleware: 'isAuthenticated',
  computed: {
    avatar() {
      return this.$store.getters['user/avatar']
    },
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    jump(index) {
      this.$router.push(`/user/${this.page[index]}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  margin: 0 auto;
  height: 100%;
  width: $--typeArea;
  background: #fff;
}
.container {
  height: 100%;
  width: 100%;
}
.el-aside {
  overflow: hidden;
}
.el-menu {
  height: 100%;
}
.el-main {
  padding: 20px 40px;
}
.user__link {
  margin: 40px 0 10px 0;
  @include font(16px, $align: center);
  @include flexCenter($fd: column);
}
</style>
